

<!-- 游戏列表  -->
<template style="max-height: 2000px">



    <main style="max-height: 2000px">

        <el-container>
            <!--            筛选部分    ===================================================================================================================-->

            <div style="margin: 10px 0">
                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="6"><!-- id -->
                        <el-input class="selectInput" placeholder="请输入id" suffix-icon="el-icon-search" v-model="reqParam.id" clearable></el-input>
                    </el-col>
                    <el-col :span="6"><!-- 名称 -->
                        <el-input placeholder="请输入名称" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.name" clearable></el-input>
                    </el-col>
                    <el-col :span="6"><!-- 标签 -->
                        <el-input placeholder="请输入标签信息" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.tagName" clearable></el-input>
                    </el-col>
                    <el-col :span="6"><!-- 平台 -->
                        <el-select v-model="reqParam.platform" class="selectInput" placeholder="全部" size="large" clearable>
                            <el-option
                                v-for="item in platformMap.entries()"
                                :key="item[0]"
                                :label="item[1]"
                                :value="item[0]"
                            />
                        </el-select>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="6"><!-- 状态 -->
                        <el-select v-model="reqParam.status" class="selectInput" placeholder="全部" size="large" clearable>
                            <el-option
                                v-for="item in statusMap.entries()"
                                :key="item[0]"
                                :label="item[1]"
                                :value="item[0]"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="6"><!-- 起始时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="startTime" type="datetime" size="large" placeholder="选择起始时间" clearable />
                    </el-col>
                    <el-col :span="6"><!-- 结束时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="endTime" type="datetime" size="large" placeholder="选择结束时间" clearable />
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="6"><!-- 价格区间-最小 -->
                        <el-text class="selectInputHalf">最低价格:</el-text>
                        <el-input-number class="selectInputHalf" placeholder="最低价格" suffix-icon="el-icon-search"
                                         v-model="reqParam.priceMin" clearable :controls="false" :precision="2" />
                    </el-col>
                    <el-col :span="6"><!-- 价格区间-最大 -->
                        <el-text class="selectInputHalf">最高价格:</el-text>
                        <el-input-number class="selectInputHalf" placeholder="最高价格" suffix-icon="el-icon-search"
                                         v-model="reqParam.priceMax" clearable :controls="false" :precision="2" />
                    </el-col>
                    <el-col :span="6"><!-- 大小-最小 -->
                        <el-text class="selectInputHalf">大小下限:</el-text>
                        <el-input-number class="selectInputHalf" placeholder="大小下限" suffix-icon="el-icon-search"
                                         v-model="reqParam.sizeMin" clearable :controls="false" :precision="2" />
                    </el-col>
                    <el-col :span="6"><!-- 大小-最大 -->
                        <el-text class="selectInputHalf">大小上限:</el-text>
                        <el-input-number class="selectInputHalf" placeholder="大小上限" suffix-icon="el-icon-search"
                                         v-model="reqParam.sizeMax" clearable :controls="false" :precision="2" />
                    </el-col>
                </el-row>


                <el-row>
                    <div style="margin: 10px 0">
                        <el-button class="el-icon-circle-plus-outline" type="primary" @click="getList(reqParam)">搜索</el-button>
                        <el-button class="el-icon-circle-plus-outline" type="primary" @click="resetCondition()">重置筛选条件</el-button>
                        <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
                        <el-button type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
                    </div>
                </el-row>
            </div>

        </el-container>
        <el-container>
            <!--            数据展示部分    ===================================================================================================================-->
            <el-scrollbar max-height="1080px" style="width: 80vw">
                <el-table height="400" :data="dataList" stripe style="width: 100%">
                    <el-table-column type="selection" width="50" @select="reqParam.selectList" />
                    <el-table-column prop="id" label="编号" width="65" />
                    <el-table-column prop="name" label="游戏名" width="160" />
                    <el-table-column prop="author" label="发行商" width="200" />
                    <el-table-column prop="platform" label="平台" width="140" />
                    <el-table-column prop="price" label="价格" width="120">
                        <template v-slot="scope">
                            <span>￥{{ (scope.row.price * 1).toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" width="100">
                        <template v-slot="scope">
                            <span>{{ getNiceSize(scope.row.size) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template v-slot="scope">
                            <span>{{ statusMap.get(scope.row.status) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="saleTime" label="开售时间" width="180" />
                    <el-table-column prop="modifierName" label="最近更新人" width="180" />
                    <el-table-column prop="modifyTime" label="最近更新时间" width="180" />
                    <el-table-column label="操作" width="160">
                        <template #default="scope">
                            <el-button size="default" type="info" @click="handleEdit(scope.row.id)">
                                编辑
                            </el-button>
                            <el-button size="default" type="danger" @click="handleDelete(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-scrollbar>
        </el-container>



        <el-container>
            <!--            分页工具    ===================================================================================================================-->
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeList"
                    :small="true"
                    :disabled="false"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="float: right; margin-bottom: 10px"
                    @size-change="handleSizeChange()"
                    @current-change="handleCurrentChange()"
                    hide-on-single-page
                />
            </div>
        </el-container>
    </main>




</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "../../../api/request";
import router from "../../../api/routerConfig";
const id = ref("")
const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")

const identityMap = ref(new Map([
    ['0', "普通用户"],
    ['1', "管理员"],
    ['3', "超级管理员"]
]))

const platformMap = ref(new Map([
    ['Steam', 'Steam'],
    ['Epic', 'Epic'],
    ['WeGame', 'WeGame'],
    ['Origin', 'Origin'],
    ['AppStore', 'AppStore'],
    ['暴雪游戏', '暴雪游戏'],
    ['微软游戏商店', '微软游戏商店'],
    ['MicrosoftStore', 'MicrosoftStore'],
    ['RockStar', 'RockStar'],
    ['GOG', 'GOG'],
    ['其它', '其它']
]))
const statusMap = ref(new Map([
    ['0', "正常"],
    ['1', "已屏蔽"]
]))

const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 0,
    pageSize: 10,
    id: "",
    name: "",
    tags: "",
    price: 0.0,
    author: "",
    platform: "",
    size: "",
    saleTime: "",
    status: "",
    priceMin: '',
    priceMax: '',
    sizeMin: '',
    sizeMax: ''
})

// const statusList = ref([
//     {id: 0, label: "全部"},
//     {id: 1, label: "待审核"},
//     {id: 2, label: "已发布"},
//     {id: 3, label: "已驳回"}
// ])


function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
// function getType(req) {
//     console.log("----------")
//     // console.log(typeMap.value)
//     console.log(typeMap.value.get(req))
//     return typeMap.value.get(req)
// }
async function getList(req) {
    // req.pageNum = pageNum.value
    // req.pageSize = pageSize.value
    // let param = reqParam.value
    // req.id = param.id
    // req.title = param.title
    // // req.type = param.type
    // req.content = param.content
    // req.tagIds = param.tagIds
    // req.fileUrls = param.fileUrls
    // req.status = param.status
    // req.backReason = param.backReason
    // req.selectList = param.selectList
    // req.searchContent = param.searchContent
    // req.creatorInfo = param.creatorInfo
    // let resp = await getPostList(req, "/post/list");
    let resp = await getPostList(reqParam.value, "/game/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}
function resetCondition() {
    reqParam.value = {
      loginUserId: "",
      loginUserName: "",
      pageNum: 0,
      pageSize: 10,
      id: "",
      name: "",
      tags: "",
      price: 0.0,
      author: "",
      platform: "",
      size: "",
      saleTime: "",
      status: "",
      priceMin: '',
      priceMax: '',
      sizeMin: '',
      sizeMax: ''
    }
    getList(reqParam.value)
}
/* 美化大小 */
function getNiceSize(size) {
    if (size == null) {
        return "暂无信息"
    }
    if (size < 1) {
        return (size * 1024) + "Kb"
    }
    if (size >= 1024) {
        return (size / 1024).toFixed(2) + "GB"
    }
    return (size * 1).toFixed(1) + "Mb"
}

function handleEdit(index) {
    console.log(index)
    router.push({
        name: "gameDetail",
        params: {
            id: index
        }
    })
}
function handleDelete(index) {
    console.log(index)
}

const dataList = ref([])

</script>




<style scoped>

.selectInput {
    margin: 10px;
    width: 100%;
    height: 65%;
}
.selectInputHalf {
    margin: 10px;
    width: 60%;
    /*height: 65%;*/
    height: auto;
}

.ml-5 {
    margin: 10px;
}

.block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.block:last-child {
    border-right: none;
}
.block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-pagination-block +  {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}
.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.demo-datetime-picker .block:last-child {
    border-right: none;
}
.demo-datetime-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

</style>